<template>
  <div>
    <el-form-item :label="label">
      <el-col :span="10">
        <ht-amount-input v-model="minAmount" placeholder="最小金额" @blur="checkAmount"></ht-amount-input>
      </el-col>
      <el-col class="line" :span="1" style="text-align: center">-</el-col>
      <el-col :span="10">
        <ht-amount-input v-model="maxAmount" placeholder="最大金额" @blur="checkAmount"></ht-amount-input>
      </el-col>
    </el-form-item>
  </div>
</template>
<script>
import HtAmountInput from "@/views/components/HtAmountInput";

export default {
  name: "AmountRangeSearch",
  components: {
    HtAmountInput
  },
  props: {
    label: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      minAmount: "",
      maxAmount: "",
    };
  },
  mounted() {
  },
  methods: {
    checkAmount() {
      let minAmount = this.getAmount1();
      let maxAmount = this.getAmount2();
      if (minAmount !== "" && maxAmount !== "" && minAmount > maxAmount) {
        this.$message({
          showClose: true,
          message: '最小金额不能大于最大金额',
          type: 'warning'
        });
        this.minAmount = "";
        this.maxAmount = "";
      }
      // 触发 HtAmountInput 组件实例对象身上的 getAmountRange 事件
      this.$emit('getAmountRange');
    },
    getAmount1() {
      return this.minAmount ? this.minAmount : "";
    },
    getAmount2() {
      return this.maxAmount ? this.maxAmount : "";
    },
    clearAmount() {
      this.minAmount = "";
      this.maxAmount = "";
    },
  },
};
</script>
